<template>
  <div class="p-40">
    <div class="border mt-40">
      <!-- status -->
      <div class="box">
        <div
          class="box-1 text-center border-right border-bottom pt-10 pb-10"
          @click="changeActive(0)"
          :class="actives == 0 ? 'bcl-primary cl-white' : ''"
        >
          登录
        </div>
        <div
          class="box-1 text-center pt-10 border-bottom pb-10"
          @click="changeActive(1)"
          :class="actives == 1 ? 'bcl-primary cl-white' : ''"
        >
          注册
        </div>
      </div>

      <!-- input -->
      <div>
        <div class="youxue-field box p-10 box-column-center mt-20 mb-20">
          <div class="left pl-10 pr-10">
            <span>姓名</span>
          </div>
          <div class="input border box-1">
            <input
              type="text"
              class="pl-10"
              style="height: 30px; line-height: 30px;"
              v-model="search.name"
            />
          </div>
        </div>

        <div class="youxue-field box p-10 box-column-center mt-20 mb-20">
          <div class="left pl-10 pr-10">
            <span>手机号</span>
          </div>
          <div class="input border box-1">
            <input
              type="number"
              class="pl-10"
              style="height: 30px; line-height: 30px;"
              v-model="search.phonenum"
            />
          </div>
        </div>

        <div class="youxue-field box p-10 box-column-center mt-20 mb-20">
          <div class="left pl-10 pr-10">
            <span>密码</span>
          </div>
          <div class="input border box-1">
            <input
              type="password"
              class="pl-10"
              style="height: 30px; line-height: 30px;"
              v-model="search.password"
            />
          </div>
        </div>

        <div class="mt-20 mb-20 box box-center" v-if="actives == 0">
          <canuse-button @click="login">登录</canuse-button>
        </div>

        <div class="mt-20 mb-20 box box-center" v-if="actives == 1">
          <canuse-button @click="register">注册</canuse-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userlogin, useregister} from "@/apis/app.js";
export default {
  data() {
    return {
      actives: 0,
      search: {
        name: '',
        password: '',
        phonenum: ''
      }
    };
  },

  methods: {
    // 切换状态
    changeActive(val) {
      this.actives = val;
    },

    // 登录
    login() {
      // this.$router.push('/home/index');
    },

    // 注册
    async register() {
      if (!this.search.name) return this.$toast('请输入姓名');
      if (!this.search.phonenum) return this.$toast('请输入手机号');
      let reg = /^1\d{10}$/;
      if (!reg.test(this.search.phonenum)) return this.$toast("请输入规范手机号");
      if (!this.search.password) return this.$toast('请输入密码');

      let params = {
        ...this.search,
      }

      let { code, data } = await useregister(params);

      // this.$router.push('/home/index');
    },
  },
};
</script>

<style lang="scss" scoped></style>
